<!--
  竞彩足球投注页
-->
<template>
  <div class="fixed-header fixed-footer">
    <x-header>
      <span class="rule-select" @click="toggle('popup')">{{rule.ruleName}}
        <i class="iconfont icon-caret-down font-xs"></i>
      </span>
      <a slot="right" class="px-2" @click="toggle('filter')"><i class="iconfont icon-filter"></i></a>
      <a slot="right" @click="toggle('popover')"><i class="iconfont icon-menu"></i></a>
    </x-header>

    <popover v-model="popover" placement="bottom right" position="fixed" :z-index="502">
      <router-link class="px-3 py-2 clickable" tag="div" to='/jingcai/prizes'>
        <i class="iconfont align-middle icon-clock font-xxxl"></i> 最近开奖
      </router-link>
      <div class="px-3 py-2 clickable" @click="faq('jingcai', () => popover = false)">
        <i class="iconfont icon-info font-xxxl"></i> 玩法说明
      </div>
    </popover>
    <masker v-model="popover" position="fixed" :z-index="501"/>

    <popup v-model="popup" position="top">
      <rules v-model="rule" :rules="playList" :size="3"/>
    </popup>

    <popup v-model="filter" class="dialog-lg rad-3 of-hidden">
      <leagues v-model="leagueList" :visible.sync="filter" :size="3"/>
    </popup>

    <popup v-if="m" v-model="show" class="dialog-lg rad-3">
      <component v-if="['hhgg', 'bqc', 'bf'].includes(rule.rule)" :is="'popup-' + rule.rule" :m="m" v-model="bet[m.matchId]" @hide="toggle('show')"/>
    </popup>

    <div v-for="g in betGroups">

      <sticky top="3.3333rem" :z-index="9">
        <div class="relative clickable text-light font-sm bg-grey px-3 py-1 bb-l" @click="g.show = !g.show">
          <b>{{g.matchDate}} {{g.week}}</b>
          <b>{{g.num}}场比赛可投</b>
          <i class="iconfont icon-arrow-up absolute-middle animate r-3" :class="g.show ? '' : 'flip'"></i>
        </div>
      </sticky>

      <div class="bb-l" v-show="g.show" v-for="m in g.matchList">

        <div class="d-flex bg-white p-3">
          <div class="flex-column text-center text-grey flex-shrink-0 font-sm mr-3" @click="m.expand = !m.expand">
            <b class="mt-auto">{{m.leagueShort}}</b>
            <small>{{m.week + m.matchNo}}</small>
            <small>{{m.endTime.substr(10)}}截止</small>
            <i class="iconfont animate font-sm" :class="m.expand ? 'icon-arrow-up' : 'icon-arrow-down'"></i>
          </div>

          <component :is="'layout-' + rule.rule" :m="m" v-model="bet[m.matchId]" @choose="choose"/>
        </div>

        <template v-if="m.expand">
          <div class="tips px-3 py-1 bb-l">
            <em>近期战绩</em>
            <em class="ml-4">主队 <b>{{m.hostWinNum || ' - '}}胜</b> <i>{{m.hostFlatNum || ' - '}}平</i> <a>{{m.hostLoseNum || ' - '}}负</a></em>
            <em class="ml-4">客队 <b>{{m.gusetWinNum || ' - '}}胜</b> <i>{{m.gusetFlatNum || ' - '}}平</i> <a>{{m.gusetLoseNum || ' - '}}负</a></em>
          </div>
          <div class="tips px-3 py-1 bb-l">
            <em>历史交锋</em>
            <em class="ml-4">{{m.hostShort}} <b>{{m.winNum || ' - '}}胜</b> <i>{{m.flatNum || ' - '}}平</i> <a>{{m.loseNum || ' - '}}负</a></em>
          </div>
          <div class="tips px-3 py-1 bb-l">
            <em>平均欧赔</em>
            <em class="ml-4" v-text="m.avgWin"></em>
            <em class="ml-5" v-text="m.avgFlat"></em>
            <em class="ml-5" v-text="m.avgLose"></em>
          </div>
          <router-link tag="div" :to="'/match?matchId=' + m.dataId" class="text-center clickable py-2">
            详细数据分析<i class="iconfont icon-arrow-right font-sm"></i></router-link>
        </template>

      </div>
    </div>

    <footer class="bottom-action pr-3">
      <div class="px-3 br-l" @click="bet = {}">
        <i class="iconfont icon-trash align-sub font-xxxl"></i>
      </div>
      <div class="ml-3 mr-auto">
        <div v-if="bets.length">已选<b class="text-red">{{bets.length}}</b>场 {{tips}}</div>
        <div v-else>请选择赛事</div>
        <div class="text-grey font-sm">页面赔率仅供参考，请以出票赔率为准</div>
      </div>
      <button class="btn btn-danger" :class="bets.length ? '' : 'ml-auto'" :disabled="!bets.length" @click="$router.push('/jingcai/cart')">确定</button>
    </footer>

  </div>
</template>

<script>
import { Popup } from 'vant'
import { get, set } from '../../utils/stoage'
import { mapping } from './calculator'
import Popover from '../widgets/popover'
import Sticky from '../widgets/sticky'
import Masker from '../widgets/masker'
import { faq } from '../../router'
import http from '../../http'

var groups = []
var map = {}

export default {
  components: {
    LayoutRqspf: () => import('./layout-rqspf'),
    LayoutHhgg: () => import('./layout-hhgg'),
    LayoutSpf: () => import('./layout-spf'),
    LayoutZjq: () => import('./layout-zjq'),
    LayoutBf: () => import('./layout-bf'),
    LayoutBqc: () => import('./layout-bqc'),
    PopupHhgg: () => import('./popup-hhgg'),
    PopupBf: () => import('./popup-bf'),
    PopupBqc: () => import('./popup-bqc'),
    Leagues: () => import('./leagues'),
    Rules: () => import('../widgets/rules'),
    Popover,
    Popup,
    Masker,
    Sticky
  },
  name: 'jingcai',
  data: () => ({
    leagueList: [],
    playList: [],
    betList: [],
    popover: false,
    filter: false,
    popup: false,
    show: false,
    rule: {},
    bet: {},
    m: null
  }),
  beforeRouteEnter (to, from, next) {
    http.post('/jingcai/matches').then(res => {
      next(vm => {
        vm.leagueList = res.leagueList // .map((l, i) => ({name: l, on: true}))
        vm.playList = res.playList
        vm.betList = res.betList.map((b, i) => {
          b.show = true
          groups[i] = b.matchList.map(m => {
            map[m.matchId] = m
            m.expand = false
            return m
          })
          return b
        })
        vm.rule = get('jingcai.rule', vm.playList.filter(p => p.rule == 'hhgg')[0])
      })
    })
  },
  beforeDestroy () {
    var bet = Object.keys(this.bet)
      .filter(k => this.bet[k].length)
      .reduce((o, k) => {
        o[k] = this.bet[k]
        return o
      }, {})
    set(`jingcai.bet.${this.rule.rule}`, bet)
    set('jingcai.rule', this.rule)
  },
  methods: {
    toggle (prop) { this[prop] = !this[prop] },
    choose (v) {
      this.m = v
      this.$nextTick(() => {
        this.show = true
      })
    },
    faq
  },
  computed: {
    betGroups () {
      var {rule, leagueList, betList} = this
      // var legs = leagueList.filter(l => l.on).map(l => l.name)
      return betList.filter((g, i) => {
        g.matchList = groups[i].filter(m => {
          return mapping(m, rule.rule) && leagueList.includes(m.leagueShort)
        })
        return g.matchList.length
      })
    },
    tips () {
      var bets = this.bets
      if (bets.length == 1) {
        var key = bets[0]
        var m = map[key]
        var rules = this.rule.rule == 'hhgg' ?
          this.bet[key].map(e => e.split('|')[0]) :
          [this.rule.rule]
        var betOne = rules.every(function (r) {
          var data = mapping(m, r)
          return data && data.isBetOne
        })
        return betOne ? '(该场可单关投注)' : '(请选择2场或以上)'
      }
    },
    bets () {
      return Object.keys(this.bet).filter(k => this.bet[k].length)
    }
  },
  watch: {
    rule (c, p) {
      if (p && Object.keys(this.bet).length) {
        set(`jingcai.bet.${p.rule}`, this.bet)
      }
      var bet = get(`jingcai.bet.${c.rule}`, {})
      Object.keys(bet).forEach(k => {
        if (!(k in map)) {
          delete bet[k]
        }
      })
      this.bet = bet
    }
  }
}
</script>
